<template>
  <div class="index-header-float container">
    <div class="float clearfix"  @mouseleave="out()">
        <div class="left">
            <h1>产品分类</h1>
            <div class="item1"></div>
            <div 
            :class="{'active':item.active}" 
            class="items"
            @mouseover="selectStyle (item)"
            @mouseout="outStyle(item)"
            v-for="item of items" :key="item.icon">
            {{item.select}}
                <span class="items-icon el-icon-arrow-right"></span>    
            </div>
        </div>
        <div class="right" 
       
        v-show="index===showID"
        v-for="(item,index) of lists" :key="index"
        >
            <div class="right-left">
              <div style="height:60px"></div>
              <div 
              class="fater-box"
              v-for="(item2) of item.list" :key="item2.name"
              >
                <h1>{{item2.name}}</h1>
                <p 
                class="check"
                
                >
                  <router-link
                  tag="a" target="_blank"
                  :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                  
                  class="check-item"
                  v-for="(item3) of item2.item" :key="item3.id" 
                  >{{item3.id}}</router-link>
                </p>
              </div>
            </div>
            <img class="right-right" :src="item.img" @click="jump(index)">
            
        </div>
    </div>
 
    
  </div>
</template>

<script>
export default {
  name: 'IndexHeaderFloat',
  data () {
    return {
        showID:null,
        active: false,
        items: [
            {select:'厨房/整体橱柜',icon:0,url:'1'},
            {select:'卧室/衣柜/衣帽间',icon:1,url:'2'},
            {select:'客厅/餐厅/电视柜',icon:2,url:'3'},
            {select:'儿童房/男孩房/女孩房',icon:3,url:'4'},
            {select:'功能房/书房/榻榻米',icon:4,url:'5'},
            {select:'全屋整装/大家居套餐',icon:5,url:'6'},
            {select:'嘉宝木门',icon:6,url:'7'},
            ],
        lists:[
            {
              img:'/static/img/float-right-1.png',
              list:[
                {
                  name:'风格',
                  item:[
                    {id:'现代简约风格',url:""},
                    {id: '欧式风格',url:'##'},
                    {id:' 美式风格',url:'##'},
                    {id:'新中式风格',url:'##'},
                  ]
                  },
                {
                  name:'布局',
                  item:[
                    {id:'一字型',url:'http://www.siemensgabor.com'},
                    {id: '廊型',url:'##'},
                    {id:'L型',url:'##'},
                    {id:'U型',url:'##'},
                  ]
                  },
                {
                  name:'面积',
                  item:[
                    {id:'6㎡以下',url:'http://www.siemensgabor.com'},
                    {id: '6-8㎡',url:'##'},
                    {id:'8-10㎡',url:'##'},
                    {id:'10-15㎡',url:'##'},
                    {id:'15㎡以上',url:'##'},
                  ]
                  },
                {
                  name:'价格',
                  item:[
                    {id:'10000元以下',url:'http://www.siemensgabor.com'},
                    {id:'10000元-30000元',url:'##'},
                    {id:'30000元以上',url:'##'},
                  ]
                  },      
              ]
            },
            {
              img:'/static/img/float-right-1.png',
              list:[
                {
                  name:'风格',
                  item:[
                    {id:'尊贵系列',url:'http://www.siemensgabor.com'},
                    {id: '经典系列',url:'##'},
                    {id:'时尚系列',url:'##'},
                    
                  ]
                  },
                {
                  name:'布局',
                  item:[
                    {id:'趟门衣柜',url:'http://www.siemensgabor.com'},
                    {id: '平开门衣柜',url:'##'},
                    {id:'衣帽间',url:'##'},
                    
                  ]
                  },
                {
                  name:'价格',
                  item:[
                    {id:'10000元以下',url:'http://www.siemensgabor.com'},
                    {id:'10000元-30000元',url:'##'},
                    {id:'30000元以上',url:'##'},
                  ]
                  },  
                {
                  name:'其他',
                  item:[
                    {id:'床',url:'http://www.siemensgabor.com'},
                    {id:'床头柜',url:'##'},
                    {id:'梳妆凳',url:'##'},
                    {id:'电视柜',url:'##'},
                  ]
                  },       
              ]
            },
            {
              img:'/static/img/float-right-1.png',
              list:[
               
                
                {
                  name:'价格',
                  item:[
                    {id:'10000元以下',url:'http://www.siemensgabor.com'},
                    {id:'10000元-30000元',url:'##'},
                    {id:'30000元以上',url:'##'},
                  ]
                  },  
                 {
                  name:'风格',
                  item:[
                    {id:'新实用主义',url:'http://www.siemensgabor.com'},
                    {id: '新中式风格',url:'##'},
                    {id:'现代风格',url:'##'},
                    {id:'欧式风格',url:'##'},
                    
                  ]
                  },
                {
                  name:'面积',
                  item:[
                    {id:'6㎡以下',url:'http://www.siemensgabor.com'},
                    {id: '6-8㎡',url:'##'},
                    {id:'8-10㎡',url:'##'},
                    {id:'10-15㎡',url:'##'},
                    {id:'15㎡以上',url:'##'},
                  ]
                },
              ]
            },
            {
              img:'/static/img/float-right-1.png',
              list:[
               
                
                {
                  name:'价格',
                  item:[
                    {id:'10000元以下',url:'http://www.siemensgabor.com'},
                    {id:'10000元-30000元',url:'##'},
                    {id:'30000元以上',url:'##'},
                  ]
                  },  
                 {
                  name:'风格',
                  item:[
                    {id:'新实用主义',url:'http://www.siemensgabor.com'},
                    {id: '新中式风格',url:'##'},
                    {id:'现代风格',url:'##'},
                    {id:'欧式风格',url:'##'},
                    
                  ]
                  },
                {
                  name:'面积',
                  item:[
                    {id:'6㎡以下',url:'http://www.siemensgabor.com'},
                    {id: '6-8㎡',url:'##'},
                    {id:'8-10㎡',url:'##'},
                    {id:'10-15㎡',url:'##'},
                    {id:'15㎡以上',url:'##'},
                  ]
                },
              ]
            },
            {
              img:'/static/img/float-right-1.png',
              list:[
                 {
                  name:'价格',
                  item:[
                    {id:'5000元以下',url:'http://www.siemensgabor.com'},
                    {id:'5000元 - 7000元',url:'http://www.siemensgabor.com'},
                    {id:'7000元 - 10000元',url:'http://www.siemensgabor.com'},
                    {id:'10000元-30000元',url:'##'},
                    {id:'30000元以上',url:'##'},
                  ]
                  },  
                 {
                  name:'风格',
                  item:[
                    {id:'新实用主义',url:'http://www.siemensgabor.com'},
                    {id: '新中式风格',url:'##'},
                    {id:'现代风格',url:'##'},
                    {id:'欧式风格',url:'##'},
                    
                  ]
                  },
                {
                  name:'面积',
                  item:[
                    {id:'6㎡以下',url:'http://www.siemensgabor.com'},
                    {id: '6-8㎡',url:'##'},
                    {id:'8-10㎡',url:'##'},
                    {id:'10-15㎡',url:'##'},
                    {id:'15㎡以上',url:'##'},
                  ]
                },
              ]
            },
            {
              img:'/static/img/float-right-1.png',
              list:[
                  {
                  name:'户型',
                  item:[
                    {id:'两房两厅',url:'http://www.siemensgabor.com'},
                    {id:'三房两厅',url:'##'},
                  ]
                  },  
                  {
                  name:'风格',
                  item:[
                    
                    {id: '新中式风格',url:'##'},
                    {id:'现代风格',url:'##'},
                    {id:'欧式风格',url:'##'},
                    
                  ]
                  },
                  {
                  name:'价格',
                  item:[
                    {id:'50000元以下',url:'http://www.siemensgabor.com'},
                    {id:'50000元 - 70000元',url:'http://www.siemensgabor.com'},
                    {id:'70000元 - 100000元',url:'http://www.siemensgabor.com'},
              
                    {id:'100000元以上',url:'##'},
                  ]
                }, 
                
              ]
            },
            {
              img:'/static/img/float-right-1.png',
              list:[
                  
                  {
                  name:'风格',
                  item:[
                    
                    {id: '新中式风格',url:'##'},
                    {id:'现代风格',url:'##'},
                    {id:'欧式风格',url:'##'},
                    
                  ]
                  },
                  {
                  name:'价格',
                  item:[
                    {id:'2000元以下',url:'http://www.siemensgabor.com'},
                    {id:'2000元 - 5000元',url:'http://www.siemensgabor.com'},
                    {id:'5000元 - 70000元',url:'http://www.siemensgabor.com'},
                    {id:'70000元-10000元',url:'##'},
                    {id:'10000元以上',url:'##'},
                  ]
                }, 
                 {
                  name:'开合方式',
                  item:[
                    {id:'平开门式',url:'http://www.siemensgabor.com'},
                    {id:'移门',url:'http://www.siemensgabor.com'},
                    
                  ]
                }, 
                
              ]
            },
      
        ]    

    }
  },
  methods: {
      selectStyle(item){
          var _this=this;
        this.$nextTick(function () {
          this.items.forEach(function (item) {
            _this.$set(item,'active',false);
          });
          this.$set(item,'active',true);
          this.showID = item.icon;
        });

      },
      out(){
        var _this=this;
        this.$nextTick(function () {
          this.items.forEach(function (item) {
            _this.$set(item,'active',false);
          });
        
        });
        this.showID = null;
        
      },
      outStyle (item) {
        
        
      },
      jump(index){
        console.log(index)
        console.log(this.items[index])
        
      }
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"

  
.container
    container()
    overflow: inherit;
    position relative
    .float
        position absolute
        left 0 
        top -40px
        z-index 9999
        // background red
        .left
            width 240px
            height 540px
            background #312b2a
            float left
.left>h1
    height 40px
    color white 
    font-size 20px
    line-height 40px
    text-indent 20px
    font-weight normal
    background #231815
.item1
  height 30px
.items
    height 60px
    color white
    font-size 16px
    line-height 60px
    text-indent 20px
    .items-icon
        line-height 60px
        float right
        margin-right 20px
.active
    background #4d4342
    color #00a6ba
.right
    margin-top 40px
    float right
    width 720px
    background rgba(255,255,255,0.9)
    height 500px
    .right-right
        float right
        margin 20px
        width 210px
        height 460px
    .right-left
      float left
      width 470px
      .fater-box
        margin 18px 0 0 25px
        // width 440px
        border-bottom 1px solid black
.fater-box>h1
  font-size 20px
  margin-bottom 15px
.check-item
  display inline-block
  color black
  font-size 16px
  margin-bottom 20px
 .check-item
  margin-right 38px 
</style>
